
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/wesite/view/common/base.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择支付方式</title>
    <%@ include file="/wesite/view/common/common.jsp"%>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<style>
    .pay-wap{
        margin-top: 10px;
    }
    .pay-wap li .aui-radio:checked{
        background-color: #ff6767;
        border:none;
        -webkit-border-radius: 100%;
        border-radius: 100%;
    }

    .pay-wap .payment-account{
        margin: 1.6rem 1.066667rem;
        height: 3.6rem;
        font-size: 0;
    }
    .pay-wap .payment-account .pay-bgimg{
        float: left;
        width: 3.6rem;
        height: 3.6rem;
        background: url("${webctx}/images/ico-payment.png") center no-repeat;
        background-size: 2.613333rem 2.133333rem;
    }
    .pay-wap .payment-account .pay-txt{
        float: left;
        width: 13rem;
        height:3.6rem;
        font-size:.8rem;
        color: #555;
        font-family: "Microsoft YaHei";
    }
    .pay-wap .payment-account .pay-txt p{
        display: block;
        line-height: 1.5;
    }
    .pay-wap .payment-account .pay-txt p em{
        color: #ff6767;
    }
    .payment-btn{
        display: block;
        margin:0 auto;
        margin-top: 2.666667rem;
        width:18.4rem;
        height: 2.4rem;
        background-color: #ff6767;
        color: #fff;
        font-size:.693333rem;
        border-radius: 5px;
        text-align:center;
        line-height:2.4rem;
    }
    .pay-wap .aui-list-item{
        display: block;
        padding-left: 1.066667rem;
        background-color: #fff;
    }
    .pay-wap .aui-list-item label{
        display: block;
        width:100%;
        height: 2.4rem;
        background: #fff url("${webctx}/images/ico-pay-delivery.png") left center no-repeat;
        background-size: 1.12rem 1.253333rem;
        line-height: 2.4rem;
        padding:0 .533333rem 0 1.653333rem;
        border-bottom: 1px solid #eee;
    }
    .pay-wap .aui-list-item:last-child label{
        background: #fff url("${webctx}/images/ico-pay-wechat.png") left center no-repeat;
        background-size: 1.253333rem 1.12rem;
        border-bottom: none;
    }
    .pay-wap label input{
        float: right;
        width: 1.066667rem;
        height: 1.066667rem;
        border:1px solid #dcdcdc;
        border-radius:100%;
        margin-top: .666667rem;
    }
    .pay-wap label.checked  input{
        background: url("${webctx}/images/ico-pay-checked.png") center no-repeat;
        background-size: 1.066667rem;
    }


</style>
<body>

<div class="pay-wap">
    <input type="hidden" id="payOrderType" value="${payOrderType}" />
    <input type="hidden" id="payOrderSn" value="${payOrderSn}" />
    <input type="hidden" id="payAmount" value="${payAmount}" />

    <div class="payment-account">
        <span class="pay-bgimg"></span>
        <div class="pay-txt">
            <p>商品订单等待支付</p>
            <p>订单编号：${payOrderSn}</p>
            <p>支付金额 :  <em>￥${payAmount}</em></p>
        </div>
        <div class="cl"></div>
    </div>
    <ul>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label>货到付款<input class="aui-radio" type="radio" name="paytype" value="2" checked> </label>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <label>微信支付<input class="aui-radio" type="radio" name="paytype" value="1" > </label>
            </div>
        </li>
    </ul>
</div>
<div id="btnSelectPayWay" class="payment-btn">立即支付</div>
<script type="text/javascript" src="${webctx}/script/aui-toast.js"></script>

<script type="text/javascript">
    var toast = new auiToast({});

    function showToastMsg(type,msg){

        switch (type) {
            case "success":
                toast.success({
                    title: msg,
                    duration: 2000
                });
                break;
            case "fail":
                toast.fail({
                    title: msg,
                    duration: 2000
                });
                break;
            case "info":
                toast.custom({
                    title: msg,
                    html:'<i class="aui-iconfont aui-icon-info"></i>',
                    duration: 2000
                });
                break;
            default:
                break;
        }
    }

    function showToastLoading(msg){
        toast.loading({
            title: msg
        });
    }

    function hideToastLoading(){
        toast.hide();
    }

    var wxPaySn = 0;
    function createWxPay(orderType , orderSn, payCallback) {
        showToastLoading("发起支付...");
        $.post(apiroot + "/we/pay/create", { "orderType": orderType , "orderSn": orderSn }, function (data1) {
            if (data1.result == "success" && data1.payment.sn) {
                wxPaySn = data1.payment.sn;
                $.post(apiroot + "/we/pay/action", {"payCode": data1.payment.sn}, function (data2) {
                    if (data2.result == "success") {
                        wx.config({
                            debug: false,
                            appId: data2.jsapi.appId,
                            timestamp: data2.jsapi.timestamp,
                            nonceStr: data2.jsapi.nonceStr,
                            signature: data2.jsapi.signature,
                            jsApiList: ['chooseWXPay']
                        });
                        wx.ready(function () {
                            wx.chooseWXPay({
                                timestamp: data2.payinfo.timeStamp,
                                nonceStr: data2.payinfo.nonceStr,
                                package: data2.payinfo.package,
                                signType: data2.payinfo.signType,
                                paySign: data2.payinfo.paySign,
                                success: function (res) {
                                    showToastMsg("success","支付成功");
                                    payCallback("success");
                                },
                                fail: function (res) {
                                    showToastMsg("fail","支付失败");
                                    payCallback("fail");
                                },
                                cancel: function (res) {
                                    showToastMsg("info","支付取消");
                                    payCallback("cancel");
                                }
                            });
                        });
                        wx.error(function (res) {
                            showToastMsg("fail","微信配置异常");
                            payCallback("failure");
                        });
                    } else {
                        showToastMsg("info",data2.message);
                        payCallback(data2.result);
                    }
                });
            } else {
                showToastMsg("info",data1.message);
                payCallback(data1.result);
            }
        });
    }

    function payCallbackAction(result){
        hideToastLoading();
        $("#btnSelectPayWay").show();
        if(wxPaySn){
            if("success"==result){
                $("#btnSelectPayWay").html("✓ 支付完成");
                $("#btnSelectPayWay").unbind("click");
                window.location.href = apiroot + "/we/pay/result/success?paySn="+wxPaySn;
            } else {
                window.location.href = apiroot + "/we/pay/result/fail?paySn="+wxPaySn;
            }
        } else {
            showToastMsg("fail","未获取到支付单号");
        }
    }

    $(function(){
        $("#btnSelectPayWay").click(function(){
            var payType = $('input:radio[name="paytype"]:checked').val();
            var payOrderType = $("#payOrderType").val().trim();
            var payOrderSn = $("#payOrderSn").val().trim();
            var payAmount = $("#payAmount").val().trim();
            if(payOrderType==""||payOrderSn==""){
                showToastMsg("fail","未找到支付商品");
                return false;
            }
            $("#btnSelectPayWay").hide();
            if(payType==2){
                var codUrl = "/we/pay/way/cod?orderType=" + payOrderType + "&orderSn=" + payOrderSn;
                window.location.href = codUrl;
            } else if(payType==1){
                createWxPay(payOrderType,payOrderSn,payCallbackAction);
            } else {
                $("#btnSelectPayWay").show();
                showToastMsg("info","请选择支付方式");
            }
        });
    });

</script>
</body>
</html>
